<template>
	<view class="page-container">

		<!-- 状态切换 -->
		<v-tabs
		v-model="tabCurrent" 
		shape="arc" 
		color="#666" 
		bgColor="#fff" 
		activeFontSize="32rpx" 
		lineHeight="8rpx" 
		lineRadius="0" 
		:tabs="tabGroup" 
		:activeColor="activeColor" 
		:fixed="true"
		:lineScale="0.6" 
		:lineColor="lineColor" 
		@change="clickTab">
		</v-tabs>

		<view class="order-group-wrapper">
			<view class="order-group-wrapper__item" v-for="item in orderDatas" :key="item.id">
				<view class="hd-block">
					<view class="number">订单号{{item.ordersn}}</view>
					<view class="state" v-if="item.status == 0">待确认</view>
					<view class="state" v-if="item.status == 1">待付款</view>
					<view class="state" v-if="item.status == 2">待消费</view>
					<view class="state" v-if="item.status == 3">已关闭</view>
					<view class="state" v-if="item.status == 4">已退款</view>
					<view class="state" v-if="item.status == 5">已完成</view>
					<view class="state" v-if="item.status == 6">退款中</view>
					<view class="state" v-if="item.status == 8">发货中</view>
				</view>
				<view class="md-block" @click="jumpOrderDetail(item)">
					<view class="hd">
						<image class="hd" :src="item.litpic" mode="aspectFill"></image>
					</view>
					<view class="bd">
						<view class="title">{{item.productname}}</view>
						<view class="sub" v-if="item.suit_name">{{item.suit_name}}</view>
						<view class="date" v-if="item.usedate">出行日期：{{item.usedate}}</view>
					</view>
				</view>
				<view class="fd-block">
					<view class="total_price">{{globalExchangeRate}}{{item.price}}</view>
					<view v-if="item.status == 0 && item.typeid != 14">

						<view class="default btn" @click="jumpOrderDetail(item)">查看详情</view>
					</view>
					<view v-if="item.status == 1">
						<view class="default btn" @click="orderCancel(item)">取消订单</view>
						<!-- #ifdef MP-WEIXIN || MP-TOUTIAO || MP-ALIPAY -->
						<view v-if="item.pay_way != 2" class="default btn" @click="orderPayment(item)">立即付款</view>
						<!-- #endif -->
						<!-- #ifdef H5 || APP-PLUS -->
						<view class="default btn" @click="orderPayment(item)">立即付款</view>
						<!-- #endif -->
					</view>
					<view v-if="item.status == 2 && item.refund_restriction != 1">

						<!-- <view class="default btn" @click="applyRefund(item)">申请退款</view> -->

					</view>
					<view v-else-if="item.status == 6">

						<view class="default btn" @click="refundDetail(item)">退款详情</view>
					</view>
					<view v-else-if="item.status == 5 && item.ispinlun == '0'">

						<!-- #ifdef MP-TOUTIAO -->

						<rate-button v-if="item.typeid==13" class="default btn toutiao-commemt-btn"
							:order-id="item.ordersn" @init="handleToutiaoRateInit($event, item.id)"
							@success="handleToutiaoRateSuccess($event, item.id)"
							@error="handleToutiaoRateError($event, item.id)">
						</rate-button>

						<view v-else-if="item.typeid==1 && cfg_comment_line_lock==1" class="default btn" @click="orderComment(item)">点评</view>
						<view v-else-if="item.typeid==2 && cfg_comment_hotel_lock==1" class="default btn" @click="orderComment(item)">点评</view>
						<view v-else-if="item.typeid==3 && cfg_comment_car_lock==1" class="default btn" @click="orderComment(item)">点评</view>
						<view v-else-if="item.typeid==5 && cfg_comment_spot_lock==1" class="default btn" @click="orderComment(item)">点评</view>
						<view v-else-if="item.typeid==13 && cfg_comment_tuan_lock==1" class="default btn" @click="orderComment(item)">点评</view>
						<view v-else-if="item.typeid==21 && cfg_comment_malls_lock==1" class="default btn" @click="orderComment(item)">点评</view>
						<view v-else-if="item.typeid==104 && cfg_comment_ship_line_lock==1" class="default btn" @click="orderComment(item)">点评</view>
						<view v-else-if="item.typeid==114 && cfg_comment_outdoor_lock==1" class="default btn" @click="orderComment(item)">点评</view>
						<view v-else-if="item.typeid==118 && cfg_comment_techan_lock==1" class="default btn" @click="orderComment(item)">点评</view>
						<view v-else-if="item.typeid==121 && cfg_comment_food_lock==1" class="default btn" @click="orderComment(item)">点评</view>
						

						<!-- #endif -->

						<!-- #ifndef MP-TOUTIAO -->
						<view v-if="item.typeid==1 && cfg_comment_line_lock==1 " class="default btn" @click="orderComment(item)">立即点评</view>
						<view v-if="item.typeid==2 && cfg_comment_hotel_lock==1 " class="default btn" @click="orderComment(item)">立即点评</view>
						<view v-if="item.typeid==3 && cfg_comment_car_lock==1 " class="default btn" @click="orderComment(item)">立即点评</view>
						<view v-if="item.typeid==5 && cfg_comment_spot_lock==1 " class="default btn" @click="orderComment(item)">立即点评</view>
						<view v-if="item.typeid==13 && cfg_comment_tuan_lock==1 " class="default btn" @click="orderComment(item)">立即点评</view>
						<view v-if="item.typeid==21 && cfg_comment_malls_lock==1 " class="default btn" @click="orderComment(item)">立即点评</view>
						<view v-if="item.typeid==104 && cfg_comment_ship_line_lock==1 " class="default btn" @click="orderComment(item)">立即点评</view>
						<view v-if="item.typeid==114 && cfg_comment_outdoor_lock==1 " class="default btn" @click="orderComment(item)">立即点评</view>
						<view v-if="item.typeid==118 && cfg_comment_techan_lock==1 " class="default btn" @click="orderComment(item)">立即点评</view>
						<view v-if="item.typeid==121 && cfg_comment_food_lock==1 " class="default btn" @click="orderComment(item)">立即点评</view>
						<!-- #endif -->
					</view>
				</view>
			</view>
			<uni-load-more :status="more"></uni-load-more>
			
			<!-- #ifdef MP-TOUTIAO -->
			<view class="bottom-info-wrap">
				<text v-if="touTiaoConfig && touTiaoConfig.cfg_toutiao_service_company">运营方：{{touTiaoConfig.cfg_toutiao_service_company}}</text>
				<text class="server" @click="goServer">服务资质</text>
			</view>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
	var page = 1,
		page_size = 10;
	import vTabs from '@/components/v-tabs/v-tabs.vue'
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	import {
		getOrderDetailPage
	} from "@/utils/toPath.js"
	import orderEvent from '@/utils/orderEvent.js'
	import orderpay from '@/utils/pay.js'
	// #ifdef MP-TOUTIAO
	import toutiaoRate from '@/utils/tioutiao_rate.js'
	// #endif
	export default {
		components: {
			vTabs,
			uniLoadMore
		},
		data() {
			return {
				tabCurrent: 0,
				tabGroup: ['全部', '待确认', '待付款', '待消费', '待评价', '退款'],
				activeColor: "#2dbb55",
				lineColor: "#2dbb55",
				status: '',
				orderDatas: [],
				isSubmitComment: false,
				more: 'noMore',
				cfg_comment_line_lock:0,
				cfg_comment_hotel_lock:0,
				cfg_comment_car_lock:0,
				cfg_comment_spot_lock:0,
				cfg_comment_tuan_lock:0,
				cfg_comment_malls_lock:0,
				cfg_comment_ship_line_lock:0,
				cfg_comment_outdoor_lock:0,
				cfg_comment_techan_lock:0,
				cfg_comment_food_lock:0,
				cfg_comment_tongyong_lock:0,
				touTiaoConfig:{}
			}
		},
		onLoad(options) {
			let cur = options.current;
			page = 1;
			if (cur == -1) {
				this.status = ''
			} else if (cur == 0) {
				this.tabCurrent = 1;
				this.status = 0
			} else if (cur == 1) {
				this.tabCurrent = 2;
				this.status = 1
			} else if (cur == 2) {
				this.tabCurrent = 3;
				this.status = 2
			} else if (cur == 5) {
				this.tabCurrent = 4;
				this.status = 5
			} else if (cur == 6) {
				this.tabCurrent = 5;
				this.status = 6
			}
			
			this.cfg_comment_line_lock = uni.getStorageSync('cfg_comment_line_lock')
			this.cfg_comment_hotel_lock = uni.getStorageSync('cfg_comment_hotel_lock')
			this.cfg_comment_car_lock = uni.getStorageSync('cfg_comment_car_lock')
			this.cfg_comment_spot_lock = uni.getStorageSync('cfg_comment_spot_lock')
			this.cfg_comment_tuan_lock = uni.getStorageSync('cfg_comment_tuan_lock')
			this.cfg_comment_malls_lock = uni.getStorageSync('cfg_comment_malls_lock')
			this.cfg_comment_ship_line_lock = uni.getStorageSync('cfg_comment_ship_line_lock')
			this.cfg_comment_outdoor_lock = uni.getStorageSync('cfg_comment_outdoor_lock')
			this.cfg_comment_techan_lock = uni.getStorageSync('cfg_comment_techan_lock')
			this.cfg_comment_food_lock = uni.getStorageSync('cfg_comment_food_lock')
			this.cfg_comment_tongyong_lock = uni.getStorageSync('cfg_comment_tongyong_lock')
			
			this.getOrderList();
			// #ifdef MP-TOUTIAO
			this.getTouTiaoConfig();
			// #endif
		},
		onShow() {
			if (this.isSubmitComment) {
				page = 1;
				this.orderDatas = [];
				this.getOrderList()
				this.isSubmitComment = false;
			}
		},
		onReachBottom() {
			this.getOrderList()
		},
		methods: {
			// #ifdef MP-TOUTIAO
			// 头条评价初始化
			handleToutiaoRateInit(event, order_id) {
				// const { status } = event.detail;
				switch (event.status) {
					case 2:
					case 3:
					case 4:
						toutiaoRate.success(order_id)
						break;
					default:
						break;
				}
			},
			// 头条评价成功回调
			handleToutiaoRateSuccess(event, order_id) {
				// const { result } = event.detail;
				if (event.result) {
					toutiaoRate.success(order_id)
				}
			},
			// 头条评价错误
			handleToutiaoRateError(event) {
				console.log(event)
			},
			

			// 抖音客服
			async getTouTiaoConfig(){
				let params = {
					method: "api/v2/toutiao/config/index"
				}
				let res = await this.$http(params);
				if(res.status){
					this.touTiaoConfig = res.data;
				}else{
					uni.showToast({
						title: res.msg,
						icon: "none"
					})
				}
			},
						
			goServer(){
				uni.setStorageSync('flair',this.touTiaoConfig.cfg_toutiao_service_certificate);
				uni.navigateTo({
					url:'../ubase/flair'
				})
			},

			
			// #endif
			// 切换订单状态
			clickTab(e) {
				page = 1;
				this.orderDatas = [];
				if (e == 0) {
					this.status = ''
				} else if (e == 1) {
					this.status = 0
				} else if (e == 2) {
					this.status = 1
				} else if (e == 3) {
					this.status = 2
				} else if (e == 4) {
					this.status = 5
				} else if (e == 5) {
					this.status = 6
				}
				this.getOrderList()
			},

			// 获取订单列表
			async getOrderList() {
				let params, infoRes;
				params = {
					method: "api/v2/order/list",
					page,
					pagesize:page_size
				}
				if (this.status !== '') {
					params = {
						...params,
						...{
							status: this.status
						}
					};
				}
				uni.showLoading({
					title: '加载中'
				})
				infoRes = await this.$http(params);
				this.more = 'loading'
				if (infoRes.status) {
					uni.hideLoading();
					this.orderDatas = [...this.orderDatas, ...infoRes.data.list];
					if (infoRes.data.list.length < page_size) {
						this.more = 'noMore'
					}
					page++
				} else {
					uni.showToast({
						title: infoRes.msg,
						icon: "none"
					})
				}
			},

			// 取消订单
			async orderCancel(item) {
				let self = this;
				orderEvent.cancelOrder(item.ordersn, function() {
					setTimeout(() => {
						page = 1;
						self.orderDatas = [];
						self.getOrderList();
					}, 2000)
				});
			},

			// 订单支付

			orderPayment(item) {
				if (item.typeid == 14 && item.is_perfect == 0) {
					uni.navigateTo({
						url:`/subPackages/customize/booking?productautoid=${item.productautoid}&price=${item.price}&orderid=${item.id}`
					})
				} else {
					let self = this;
					let orderData = {
						ordersn: item.ordersn,
						orderid: item.id,
						typeid: item.typeid
					};
					orderpay(orderData, function() {
						// #ifdef MP-WEIXIN || MP-TOUTIAO || MP-ALIPAY
						//小程序支付成功前往支付成功页
						uni.redirectTo({
							url: `/pages/order/paysuccess?ordersn=${item.ordersn}&orderid=${item.id}`
						})
						// #endif
					});
				}

			},

			// 申请退款

			applyRefund(item) {
				let params = {
					order_id: item.id
				};
				orderEvent.refundOrder(params);
			},

			// 退款详情
			refundDetail(item) {
				let params = {
					order_id: item.id,
					status: item.status
				};
				orderEvent.refundInfo(params);
			},

			// 订单点评
			orderComment(item) {
				let params = {
					typeid: item.typeid,
					orderid: item.id,
					pid: item.productautoid,
					title: item.productname
				};
				orderEvent.commentOrder(params);
			},
			// 订单详情
			jumpOrderDetail(item) {
				if (true) {
					let pageParams = {
						pid: item.productautoid,
						orderid: item.id,
						typeid: item.typeid,
						title: item.productname
					};
					let url = getOrderDetailPage(item.typeid, pageParams);
					if (url) {
						uni.navigateTo({
							url: url
						})
					}
				}

			}
		}
	}
</script>

<style lang="scss">
	page{
		background: #f6f6f6;
	}
	/* #ifdef MP-TOUTIAO */
	.toutiao-commemt-btn {
		display: inline !important;
		;
		color: #333;
	}
	/* #endif */

	.order-group-wrapper {
		padding: 20rpx 24rpx;

		&__item {
			margin-bottom: 24rpx;
			border-radius: 20rpx;
			background: #fff;

			.hd-block {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 24rpx;

				.number {
					color: $uni-text-color-grey;
					font-size: 22rpx;
				}

				.state {
					color: $uni-text-color-price;
					font-size: 24rpx;
				}
			}

			.md-block {
				display: -webkit-box;
				padding: 20rpx 24rpx;

				.hd {
					width: 180rpx;
					height: 180rpx;
					position: relative;
					overflow: hidden;
					border-radius: 12rpx;
					background: #e7e7e7;
				}

				.bd {
					-webkit-box-flex: 1;
					margin-left: 24rpx;

					.title {
						height: 80rpx;
						line-height: 40rpx;
						font-size: 28rpx;
						text-overflow: -o-ellipsis-lastline;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						line-clamp: 2;
						-webkit-box-orient: vertical;
					}

					.date,
					.sub {
						color: #999;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						margin-top: 10rpx;
						font-size: 24rpx;
					}
				}
			}

			.fd-block {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 24rpx 20rpx;

				.total_price {
					font-size: 28rpx;
					font-family: Arial;
				}

				.btn {
					display: inline-block;
					padding: 6rpx 20rpx;
					margin-right: 10rpx;
					border-radius: 60rpx;
					font-size: 24rpx;

					&:last-child {
						margin-right: 0;
					}

					&.default {
						border: 2rpx solid #d5d5d5;
						background: #fff;
					}
				}
			}
		}
	}
	.bottom-info-wrap{
		font-size: 28rpx;
		padding: 20rpx 24rpx;
		text-align: center;
		.server{
			color: #2dbb55;
			text-align: center;
			margin-left: 20rpx;
		}
	}
</style>
